// 文档加载事件
$(function(){

    // 首页banner
    $("#bannerSlider").tyslide({
        boxh:432,//盒子的高度
        w:1000,//盒子的宽度
        h:390,//图片的高度
        isShow:true,//是否显示控制器
        isShowBtn:true,//是否显示左右按钮
        controltop:10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW:20,//控制按钮宽度
        controlsH:20,//控制按钮高度
        radius:10,//控制按钮圆角度数
        controlsColor:"#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor:"#ff6600",//当前控制按钮的颜色
        isShowNum:true //是否显示数字
    });


    // 电子书
    $("#ebook .listbox").tyslide({
        boxh:219,//盒子的高度
        w:332,//盒子的宽度
        h:219,//图片的高度
        isShow:true,//是否显示控制器
        isShowBtn:true,//是否显示左右按钮
        controltop:10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW:20,//控制按钮宽度
        controlsH:4,//控制按钮高度
        radius:0,//控制按钮圆角度数
        controlsColor:"#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor:"#95d46c",//当前控制按钮的颜色
        isShowNum:false //是否显示数字
    });

    //功能三: tab切换效果  选项卡效果
    //使用原生js来实现
        /* 
            思路:
                1.获取相关元素对象  
                    .title li
                    .content ul
                2.注册li事件 (点击 或 移入移出)
                3.实现逻辑功能

        */

        /* //1.获取元素对象
            let lis=document.querySelectorAll('#ebook .title ul li');
            let uls=document.querySelectorAll('#ebook .content>ul');

        //2.给li注册事件  移入
            for (let i = 0; i < lis.length; i++) {
                // console.log(lis[i]);
                //批量注册事件
                lis[i].onmouseover=function() {
                    // console.log(1);
                    //先清除所有li标签上的类名
                    for (let j = 0; j < lis.length; j++) {
                        lis[j].className='';

                        uls[j].classList.remove('on');
                        
                    }
                    //把当前li设置类名为active
                    this.className='active';

                    //??? li如何与ul内容对应---索引

                    //uls[i].className='on';//不能使用,直接覆盖类名
                    // console.log(uls[i].classList);
                    uls[i].classList.add('on');
                }
                
            } */


        //jquery的方法
        $('#ebook .title ul li').hover(function(){
            //给当前li添加类名active ,兄弟li去类名
            $(this).addClass('active').siblings().removeClass('active');

            //获取当前li的索引
            // index() 不传递参数，返回这个元素在同辈中的索引位置
            let index=$(this).index();

            //设置当前ul对应的类名 on 其它ul去掉类名 on
            $('#ebook .content>ul').eq(index).addClass('on').siblings().removeClass('on');

        })  

  
    //手风琴效果
        $('#ebook .rightbox ul li').hover(function(){
            //移入到当前 li标签 让里面的 h4 隐藏  div显示
            // $(this).find('h4').addClass('hide');
            $('h4',this).addClass('hide')
           
            //移入到当前 li标签 让里面的 div显示
            //$(this).find('div').removeClass('hide');
            $('div',this).removeClass('hide')

            //把当前li 的兄弟 li里面的 h4 显示  div隐藏
            $(this).siblings().find('h4').removeClass('hide');
            $(this).siblings().find('div').addClass('hide');
        })


    //楼层共用方法
    //所有选项卡
    function tabFn(obj){
        //$('#cloth .title ul li')
        $('#'+obj+' .title ul li').hover(function(){
            //给当前li添加类名active ,兄弟li去类名
            $(this).addClass('active').siblings().removeClass('active');

            //获取当前li的索引
            // index() 不传递参数，返回这个元素在同辈中的索引位置
            let index=$(this).index();

            //设置当前ul对应的类名 on 其它ul去掉类名 on
            $('#'+obj+' .content>ul').eq(index).addClass('on').siblings().removeClass('on');

        });
        //调用当前楼层轮播效果
        lunFn(obj);
    }  
    
    //所有楼层轮播效果
    function lunFn(obj){
        $('#'+obj+" .listbox").tyslide({
            boxh:219,//盒子的高度
            w:480,//盒子的宽度
            h:219,//图片的高度
            isShow:true,//是否显示控制器
            isShowBtn:true,//是否显示左右按钮
            controltop:10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW:20,//控制按钮宽度
            controlsH:4,//控制按钮高度
            radius:0,//控制按钮圆角度数
            controlsColor:"#d7d7d7",//普通控制按钮的颜色
            controlsCurrentColor:"#95d46c",//当前控制按钮的颜色
            isShowNum:false //是否显示数字
        });
    }


    //调用
    tabFn('cloth');
    tabFn('sports');
    tabFn('chlidren');


//固定头部效果
    /* 
        思路:
            1.注册window上滚动事件  onscroll
            2.获取滚动条距离顶部的距离 
            3.判断 如滚动条距离 > 300 

                满足条件:  显示固定头部
                不满足条件: 隐藏固定头部


    
    */
    $(window).scroll(function(){
        // console.log(1);
        //获取滚动条的距离  scrollTop()
        let sTop=$(this).scrollTop();
        // console.log(sTop)

        //判定  sTop>300  显示固定头部 否则 隐藏固定头部
        if(sTop>300){
            //显示
            $('#fixedHeader').slideDown();
            //把头部中的search 添加到 固定头部中
            $('#header .search').appendTo('#fbox');

        }else{
             //隐藏
             $('#fixedHeader').slideUp();

             //把固定头部中的search 放回到头部指定位置
             $('#fbox .search').appendTo('.ptb220')
        }
    })


    //楼层跳转效果
    /* 
        需求: 
            功能一: 移入到当前li 让li 宽度为80 背景色不同 图标定位坐标
                    其它li恢复到原来效果

            功能二: 点击哪个li 让跳转到对应楼层


    */
   //功能一:
   //使用数组来保存颜色值
   /* let bgcArr=['red','cyan','green','orange','pink'];

    $('#floorbox ul li').hover(function(){

        //获取当前li标签对应的索引值
        let index=$(this).index();

        //移入
        $(this).css({
            width:'80px',
            backgroundColor:bgcArr[index],
            backgroundPositionX:'-40px'
        })
    },function(){
        //移出
        $(this).css({
            width:'',
            backgroundColor:'',
            backgroundPositionX:''
        })
    }) */


    //方式二: 先在标签上自定义属性保存颜色
    $('#floorbox ul li').hover(function(){
        //获取到当前li标签上的bgc的值
        let bgColor=$(this).attr('bgc')

        //移入
        $(this).css({
            width:'80px',
            backgroundColor:bgColor,
            backgroundPositionX:'-40px'
        })
    },function(){
        //移出
        $(this).css({
            width:'',
            backgroundColor:'',
            backgroundPositionX:''
        })
    }).click(function(){
        //获取当前li标签的索引值
        let index=$(this).index();

        //获取当前li标签对应的楼层 ==> 当前楼层距离顶部的距离

        let sfloor=$('.allfloor').eq(index).offset().top;

        //把当前楼层的距离设置到 滚动条上
        $('html,body').animate({'scrollTop':sfloor-50},500);

    })



})